<style scoped lang="scss">
.main {
  padding: 2vh;
  background-color: #2d3748;
}
</style>
<template>
  <div class="main">
    <n-flex justify="space-around" size="large">
      <div>
        <n-scrollbar style="max-height: 96vh">
          <canvas ref="canvas" width="1371" height="1920" :style="canvasStyle"></canvas>
        </n-scrollbar>
      </div>
      <div>
        <n-card></n-card>
      </div>
    </n-flex>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'
const value = ref(100)

/* 数据 */
import { getPdfImages, type PdfImagesResponse } from '@/api/image'
const props = defineProps<{
  id: string
}>()
const pdfId = Number(decodeURIComponent(props.id))
const page = ref(1)
const coordinates = ref([])
const imageList = ref<PdfImagesResponse>({
  data: [],
  page: { current_page: 1, total_page: 1 }
})
const onPageChange = (newPage: number) => {
  newPage = page.value
}
watch(page, (newPage) => {
  fetchData(newPage)
})
/* -- 数据end -- */
const canvasStyle = computed(() => {
  const imageUrl = imageList.value.data.length > 0 ? imageList.value.data[0].url : ''
  return {
    backgroundImage: `url('${imageUrl}')`,
    transform: `scale(${value.value / 100})`,
    transformOrigin: 'top center'
  }
})
const fetchData = async (pageNumber: number) => {
  try {
    const response = await getPdfImages(pdfId, pageNumber)

    imageList.value = response.data
    coordinates.value = response.data.data[0].coordinate
  } catch (error) {
    console.error('获取 PDF 列表时出错:', error)
  }
}
onMounted(() => {
  fetchData(page.value)
})
</script>
